<!-- 个人中心 -->
<template>
	<view class="container">
<!-- 		<view class="order-nav u-flex">
			<view class="nav-item u-flex-col u-flex-1 u-row-center u-col-center" v-for="nav in groupState" :key="nav.id" @tap="onNav(nav.id)">
				<view class="item-title" :class="{ 'item-title-active': stateId === nav.id }">{{ nav.title }}</view>
				<text class="nav-line" :class="{ 'line-active': stateId === nav.id }"></text>
			</view>
		</view> -->
		<view class="order-data">
            
			<view class="order-item" v-for="(item,index) in dataList"  :key="index">
				<view class="top">
					<view><image style="width: 188rpx;height: 135rpx;" :src="'https://xckj-auto-file-res.oss-cn-shenzhen.aliyuncs.com/'+item.img_main"></image></view>
					<view class="top1">
						<view class="toptitle">{{item.title}}</view>
						<view class="topcontent">世家于中国深圳海上世界文化艺术中心…</view>
					</view>
				</view>
				<view class="bot">
					<view class="bottime">{{item.createtime}}</view>
					<view class="botbox">
					<view class="botItem">
						<image style="width: 26rpx;height: 26rpx;" src="../../static/image/fenxiao69.png"></image>
						<view class="botnum">65</view>
					</view>
					<view class="botItem">
						<image style="width: 26rpx;height: 26rpx;" src="../../static/image/fenxiao70.png"></image>
						<view class="botnum">65</view>
					</view>
					<view class="botItem">
						<image style="width: 26rpx;height: 26rpx;" src="../../static/image/fenxiao71.png"></image>
						<view class="botnum">165</view>
					</view>
					<view class="botItem">
						 <view class="botbm">已报名</view>
					</view>
					</view>
				</view>
			</view>

	

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
	groupState: [
				{
					id: 1, 
					title: '全部'
				},
				{
					id: 2, 
					title: '钻石类	'
				},
				{
					id: 3, 
					title: '翡翠类'
				},
				{
					id: 4, 
					title: '玛瑙 '
				},
				{
					id: 5, 
					title: '琥珀 '
				}
			],
			stateId: 1,
            dataList:[]
			};
					
		},
		onLoad() {},
		onShow() {
		this.getData()
		},
		computed: {

		},
		methods: {
	onNav(id) {
			if (this.stateId !== id) {
				this.stateId = id;
			}
            this.getData()
		},
		getData(){
			let that=this
		    that.$api.trainenrollList({
                type:that.stateId
		    }).then(res => {
		        console.log('res',res)
		        if(res.code ==1){
                    that.dataList=res.data
		        }
		    });
		},
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.order-nav {
		background: #fff;
		height: 80rpx;
	
		.nav-item {
			flex: 1;
	
			.item-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
				line-height: 76rpx;
			}
	.item-title-active {
		color: #333333;
		font-weight: bold;
	}
			.nav-line {
				width: 80rpx;
				height: 4rpx;
				background: #fff;
	
				
			}
	
			.line-active {
				background: #DE2415;
			}
		}
	}
	.order-data{
		    padding: 0px 30rpx 0px 30rpx;
	}
	.top{
		display: flex;
		margin-top: 36rpx;
		
	}
	.order-item{
		border-top: 1px solid #EEEEEE;;
		margin-top: 36rpx;	
	}
	.bot{
		display: flex;
		margin-top: 30rpx;
    justify-content: space-between;
	}
	.botItem{
		display: flex;
		margin-left: 36rpx;
         align-items: center;
	}
	.botbox{
		display: flex;
        align-items: center;
		
	}
	.toptitle{
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}
	.topcontent{
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}
	.top1{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		}
		.bottime{
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #CCCCCC;
		}
		.botnum{
			font-size: 24rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #CCCCCC;
			margin-left: 8rpx;
		}
		.botbm{
			width: 88rpx;
			height: 32rpx;
			background: #EEEEEE;
			border-radius: 6px 6px 6px 6px;
			opacity: 1;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			text-align: center;
		}
</style>
